import React, { useState } from "react";
import { Input, Tooltip, Icon, Button, message } from "antd";
import User from "../../api/user/index";
const UserLogin = props => {
  const [phone, setPhone] = useState();
  const [password, setPassword] = useState();
  const [loading, setLoading] = useState(false);
  const inputChange = (e, id) => {
    id === 1 ? setPhone(e.target.value) : setPassword(e.target.value);
  };
  const btnClick = () => {
    setLoading(true);
    let formData = {
      phone: phone,
      password: password
    };
    User.login(formData).then(res => {
      if (res.code === 200) {
        message.success("登陆成功!");
        localStorage.setItem("token", res.data.token);
        setLoading(false);
        props.history.push("/index/dashboard");
      } else {
        message.error(res.data);
      }
    });
  };
  return (
    <div style={{ padding: "10px 20px" }}>
      <Input
        placeholder="输入登陆手机号"
        value={phone}
        maxLength={11}
        onChange={e => inputChange(e, 1)}
        prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
        suffix={
          <Tooltip title="Extra information">
            <Icon type="info-circle" style={{ color: "rgba(0,0,0,.45)" }} />
          </Tooltip>
        }
      />
      <Input.Password
        value={password}
        style={{ marginTop: "20px" }}
        onChange={e => inputChange(e, 2)}
        placeholder="输入密码"
        prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
      />
      <Button
        type="primary"
        style={{ width: "100%", marginTop: "20px" }}
        onClick={btnClick}
        loading={loading}
      >
        登陆
      </Button>
    </div>
  );
};
export default UserLogin;
